<template>
  <div class="detailsForm">
    <el-dialog
      title="订单详情:"
      :visible="detailsVisible"
      width="40%"
      @close="detailsClose"
      @open="detailsOpen"
    >
      <el-form label-width="120px">
        <div class="detailsTtile">
          <div>
            <div><img src="@/assets/Task/finished.png" alt=""></div>
            <div>出货成功</div>
          </div>
          <div>
            <img
              src="http://likede2-admin.itheima.net/img/pic_2.3b5af41c.png"
              alt=""
            >
          </div>
        </div>
        <el-form label-width="100px" class="demo-ruleForm">
          <el-row style="padding-left: 30px; margin-top: 25px">
            <el-col
              :span="12"
            ><div class="grid-content bg-purple">
              <el-form-item label="订单编号:">
                <span>{{ item.orderNo }}</span></el-form-item>
            </div>
            </el-col>
            <el-col
              :span="12"
            ><div class="grid-content bg-purple-light">
              <el-form-item label="商品名称:">
                <span>{{ item.skuName }}</span></el-form-item>
            </div>
            </el-col>
            <el-col
              :span="12"
            ><div class="grid-content bg-purple">
              <el-form-item label="订单金额:">
                <span>{{ item.amount / 100 }}</span></el-form-item>
            </div>
            </el-col>
            <el-col
              :span="12"
            ><div class="grid-content bg-purple">
              <el-form-item label="设备编号:">
                <span>{{ item.innerCode }}</span></el-form-item>
            </div>
            </el-col>
            <el-col
              :span="12"
            ><div class="grid-content bg-purple-light">
              <el-form-item label="创建时间:">
                <span>
                  {{
                    new Date(item.createTime)
                      .toLocaleString()
                      .replace(/\//g, ".")
                  }}
                </span></el-form-item>
            </div>
            </el-col>
            <el-col
              :span="12"
            ><div class="grid-content bg-purple">
              <el-form-item label="完成时间:">
                <span>{{
                  new Date(item.updateTime)
                    .toLocaleString()
                    .replace(/\//g, ".")
                }}</span></el-form-item>
            </div>
            </el-col>
            <el-col
              :span="12"
            ><div class="grid-content bg-purple-light">
              <el-form-item label="支付方式:">
                <span>{{ payTypeList[+item.payType] }}</span>
              </el-form-item>
            </div>
            </el-col>
            <el-col><div class="grid-content bg-purple">
              <el-form-item label="设备地址:">
                <span>{{ item.addr }}</span></el-form-item>
            </div>
            </el-col>
          </el-row>
        </el-form>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    detailsVisible: {
      type: Boolean,
      default: false
    },
    item: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      payTypeList: {
        1: '支付宝',
        2: '微信'
      }
    }
  },
  methods: {
    detailsClose() {
      this.$emit('detailsClose')
    },
    detailsOpen() {
      console.log('订单管理-查看详情-弹出层')
    }
  }
}
</script>

<style lang="scss">
.el-dialog {
  border-radius: 10px;
  .el-dialog__header .el-dialog__title {
    color: #333333;
    font-size: 16px;
    font-weight: bold;
  }
  .el-dialog__header {
    border-radius: 10px;
    background-color: #fff;
  }
  .el-icon-close:before {
    color: #909399;
  }
  .el-dialog__body {
    padding: 15px 20px;
  }
  .dialog-footer {
    padding: 0 20px 10px 20px;
  }
  .el-button {
    background-color: #fbf4f0 !important;
    border: unset;
    margin: 20px 0;
    margin-left: 120px;
    height: 36px;
  }
  .el-form-item {
    margin-bottom: 0px;
  }
  .el-dialog .el-dialog__body {
    padding: unset;
  }
  .el-link.el-link--default {
    color: #5f84ff;
  }
}
.detailsTtile {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 54px;
  background-color: hsla(0, 0%, 92.5%, 0.39);
  padding-left: 22px;
  :first-child {
    display: flex;
    align-items: center;
    :nth-child(2) {
      margin-left: 16px;
    }
  }
}
.el-loading-mask {
  z-index: 0;
}
</style>
